<template>
  <div class="header-btn-container">
    <n-popover trigger="click" placement="bottom-end">
      <template #trigger>
        <hover-container tooltip-content="消息通知">
          <div class="flex-between" style="width: 40px">
            <n-badge :value="3" :max="99">
              <n-icon size="24" style="cursor: pointer" color="#000000">
                <Alert24Regular />
              </n-icon>
            </n-badge>
          </div>
        </hover-container>
      </template>
      <n-tabs type="line">
        <n-tab-pane name="通知">
          <template #tab>
            <span style="margin-right: 5px">通知</span>
            <n-badge :value="1" :max="99" color="#0099ad" :show-zero="true" />
          </template>
          还有好多没写完的代码<br />
          还有好多没写完的代码<br />
          还有好多没写完的代码<br />
        </n-tab-pane>
        <n-tab-pane name="消息">
          <template #tab>
            <span style="margin-right: 5px">消息</span>
            <n-badge :value="2" :max="99" color="#faad14" :show-zero="true" />
          </template>
          这里有一些消息<br />
          这里有一些消息<br />
          这里有一些消息<br />
          这里有一些消息<br />
          这里有一些消息<br />
        </n-tab-pane>
        <n-tab-pane name="待办">
          <template #tab>
            <span style="margin-right: 5px">待办</span>
            <n-badge :value="0" :max="99" :show-zero="true" />
          </template>
          你还有很多没做的事<br />
          你还有很多没做的事<br />
          你还有很多没做的事<br />
          你还有很多没做的事<br />
        </n-tab-pane>
      </n-tabs>
    </n-popover>
  </div>
</template>

<script lang="ts" setup>
import { Alert24Regular } from "@vicons/fluent";
import HoverContainer from "@/components/Common/HoverContainer.vue";
</script>

<style scoped></style>
